import React from 'react'
import { Menu, Icon } from 'antd';
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import { switchMenu, saveBtnList } from './../../redux/action'
import './index.less'
import { axhttp } from '../../utils/axhttp';
const SubMenu = Menu.SubMenu;
class NavLeft extends React.Component {
    state = {
        currentKey: ''
    }
    // 菜单点击
    handleClick = ({ item, key }) => {
        if (key == this.state.currentKey) {
            return false;
        }
        // 事件派发，自动调用reducer，通过reducer保存到store对象中
        const { dispatch } = this.props;
        dispatch(switchMenu(item.props.title));

        this.setState({
            currentKey: key
        });
        // hashHistory.push(key);
    };

    getChildren = (t, v) => {
        let children = [];
        t && t.forEach((f) => {
            const c = this.getChildren(f.children, v);
            /** 当children里面包含搜索的值，将该节点加入到返回数组中 */
            if (c.length > 0) {
                children.push({
                    ...f,
                    children: c,
                });
            }
            /** 没有，但该节点包含搜索的值，也将该节点加入到返回数组中 */
            else if (f.roles.indexOf(v) > -1) {
                children.push({
                    ...f,
                });
            }
        });

        return children;
    }

    componentWillMount() {
        axhttp.getXhr('/api/menu/readx').then(res => {
            let menu = res.data;
            const user = JSON.parse(localStorage.getItem('login_user_info'));
            menu = this.getChildren(menu, user && user.roleId);
            const menuTreeNode = this.renderMenu(menu);
            this.setState({
                menuTreeNode
            });
        });
    }
    // 菜单渲染
    renderMenu = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <SubMenu title={item.title} key={item.key}>
                        { this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item title={item.title} key={item.key}>
                <NavLink to={item.key}>{item.title}</NavLink>
            </Menu.Item>
        })
    }
    homeHandleClick = () => {
        const { dispatch } = this.props;
        dispatch(switchMenu('首页'));
        this.setState({
            currentKey: ""
        });
    };
    render() {
        return (
            <div>
                <NavLink to="/home" onClick={this.homeHandleClick} theme='dark'>
                    <div className="logo">
                        <img src="/assets/logo-ant.svg" alt="" />
                        <h1>共享单车管理系统</h1>
                    </div>
                </NavLink>
                <Menu
                    onClick={this.handleClick}
                    theme="dark"
                >
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        );
    }
}
export default connect()(NavLeft)